<template>
 <div class="my-popover-tip">
  <slot></slot>
  <el-popover
    placement="top-start"
    :title="props.title"
    :width="200"
    :effect="props.effect"
    trigger="hover"
    :content="props.content"
  >
    <template #reference>
      <el-icon 
        :size="props.size" class="upload-bgImg-tip-icon tip-icon" 
        :style="{
          'cursor': 'pointer',
          'color': props.color
        }"
      >
        <component :is="markRaw(props.icon)"></component>
      </el-icon>
    </template>
  </el-popover>
 </div>
</template>

<script setup>
import { markRaw } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: '16px'
  },
  icon:{
    type: Object,
    default: () => {
      return QuestionFilled
    }
  },
  color: {
    type: String,
    default: '#aaa'
  },
  effect: {
    type: String,
    default: 'dark'
  },
})
</script>

<style lang="scss" scoped>
.my-popover-tip{
  display: flex;
  justify-content: center;
  align-items: center;
}
.tip-icon{
  color: $black_tips;
}
</style>
